<template>
    <div>
        <h1>用户管理</h1>
        <button @click="loadUsers">刷新</button>
        <input type="text" placeholder="请输入关键字" v-model="keyword">
        <input type="button" value="查询" @click="btnfilter">
        <table>
            <thead>
                <tr>
                    <td>用户名</td>
                    <td>昵称</td>
                    <td>角色</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="user in users" :key="user.id">
                    <td>{{ user.username }}</td>
                    <td>{{ user.nickname }}</td>
                    <td ><span v-for="role in user.roles" :key="role.id" class="role-tag">{{ role.roleName }}</span></td>
                    <td>
                        <input type="button" value="编辑" @click="btnedit(user.id)">
                        <input type="button" value="删除" @click="btndel(user.id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <button @click="prevPage" :disabled="currentPage <= 1">上一页</button>
            <span>第 {{ currentPage }} 页，共 {{ totalPages }} 页</span>
            <button @click="nextPage" :disabled="currentPage >= totalPages">下一页</button>
        </div>
    </div>

   
</template>

<script setup>
import { reactive, ref } from 'vue'
import { delItem, getAll } from '@/api/UserApi';
import { useRouter } from 'vue-router';

const router=useRouter();
// ==响应式数据-开始==
const users = reactive([])
let keyword = ref('')
const currentPage = ref(1)
const totalPages = ref(1)
const pageSize = ref(10)
//==响应式数据-结束==


const loadUsers = async (page = 1) => {
    //     let data = await getAll()
    //     console.log(data.data.items)
    //    users.push(...data.data.items)
    
    try {
        const response = await getAll({
            pageIndex: page,
            pageSize: pageSize.value,
            Keyword: keyword.value || ''
        });
        users.splice(0, users.length, ...response.data.items);//替换数组
        totalPages.value = Math.ceil(response.data.totalCount / response.data.pageSize)
        currentPage.value = page
    } catch (error) {
        console.error("用户加载失败:", error);
        users.splice(0, users.length); // 清空数组    
    }
}

const btnfilter=()=>{
    loadUsers();
}

//下一页
const nextPage = () => {
    if (currentPage.value < totalPages.value) {
        loadUsers(currentPage.value + 1)
    }
}

//上一页
const prevPage = () => {
    if (currentPage.value >= 1) {
        loadUsers(currentPage.value - 1)
    }
}

function btnedit(id){
    console.log('编辑');
    router.push(`/UserEdit/${id}`)
}

async function btndel(id){
    console.log('删除');
    if (confirm("确认删除吗？")) {
        let data = await delItem(id)
        // console.log(data);
        
    }
}

loadUsers()
</script>

<style scoped>
table,
th,
tr,
td {
    border: 1px, solid, black;
    border-collapse: collapse;
    text-align: center;
}

table {
    width: 50%;
}

.role-tag {
  margin-right: 5px;
  padding: 2px 5px;
  background-color: #e0e0e0;
  border-radius: 3px;
}
</style>